<template>
  <el-date-picker
    v-model="_value"
    :picker-options="pickerOptions"
    :default-time="['00:00:00', '23:59:59']"
    :type="type"
    :clearable="false"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="timestamp"
    align="center"
    :disabled="disabled"
  >
  </el-date-picker>
</template>

<script>
/**
 * h-date-range
 * @module components/h-date-range
 * @desc 时间日期区间选择控件
 *
 * @param { array } value - 时间日期区间，用:value.sync绑定，双向绑定
 * @param { number, string } startTime - 开始时间，:start-time.sync绑定
 * @param { number, string } endTime - 结束时间，:end-time.sync绑定
 * @param { string } range - 可选区间范围，可选值future, history, 默认值future
 * @param { string } type - 类型，可选值daterange, datetimerange, 默认值daterange
 * @param { boolean } disabled - 禁用
 */
export default {
  name: 'h-date-range',
  componentName: 'h-date-range',
  data () {
    return {
      pickerOptions: {}
    }
  },
  props: {
    value: Array,
    disabled: Boolean,
    startTime: [Number, String],
    endTime: [Number, String],
    range: {
      type: String,
      default: 'future',
      validator (value) {
        return [
          'future',
          'history'
        ].indexOf(value) > -1
      }
    },
    type: {
      type: String,
      default: 'daterange',
      validator (value) {
        return [
          'daterange',
          'datetimerange'
        ].indexOf(value) > -1
      }
    }
  },
  computed: {
    _value: {
      get () {
        let s = !!(this.startTime && (this.startTime !== undefined || this.startTime !== ''))
        let e = !!(this.endTime && (this.endTime !== undefined || this.endTime !== ''))
        if (s && e) {
          return [this.startTime * 1000, this.endTime * 1000]
        } else {
          return [this.value[0] * 1000, this.value[1] * 1000]
        }
      },
      set (val) {
        this._startTime = val[0] / 1000
        this._endTime = val[1] / 1000
        this.$emit('update:value', [val[0] / 1000, val[1] / 1000])
        this.$emit('change', [val[0] / 1000, val[1] / 1000])
      }
    },
    _startTime: {
      get () {
        let s = !!this.startTime && (this.startTime !== undefined || this.startTime !== '')
        if (s) {
          return this.startTime
        } else {
          return this.value[0]
        }
      },
      set (val) {
        this.$emit('update:startTime', val)
      }
    },
    _endTime: {
      get () {
        let e = !!this.endTime && (this.endTime !== undefined || this.endTime !== '')
        if (e) {
          return this.endTime
        } else {
          return this.value[1]
        }
      },
      set (val) {
        this.$emit('update:endTime', val)
      }
    }
  },
  methods: {
    // 根据range不同，匹配不同的pickerOptions
    setPickerOptions () {
      let range = this.range
      let pickerOptionsFuture = {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() < end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        }
      }
      let pickerOptionsHistory = {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() > end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
      switch (range) {
        case 'future':
          this.pickerOptions = pickerOptionsFuture
          break
        case 'history':
          this.pickerOptions = pickerOptionsHistory
          break
      }
    },
    // 组件创建后，更新一次dateRange，保持组件内外数据一致
    resetDateRange () {
      this.$emit('update:value', this._value)
    }
  },
  created () {
    this.setPickerOptions()
    this.resetDateRange()
  }
}
</script>
